<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>插入子节点.insertBefore</title>

<script type="text/javascript">
    window.onload=function(){
        var oTxt=document.getElementById('txt1');
        var oUl=document.getElementById('ul1');
        var oBtn=document.getElementById('btn1');
        
        oBtn.onclick=function(){
            var oLi=document.createElement('li');
            var ali=oUl.getElementsByTagName('li');
            oLi.innerHTML=oTxt.value;
            //父级.insertBefore(子节点,在什么之前)。
            if(ali.length>0){
                oUl.insertBefore(oLi,ali[0]);
            }else{
                oUl.insertBefore(oLi);
            }
        };
    };
</script>    
</head>
<body>
    <input type="text" id="txt1">
    <input type="button" id="btn1" value="创建li">
    <ul id="ul1">

    </ul>
</body>
</html>